<template>
	<view class="layout">
		<hl-divider>设备信息</hl-divider>
		<view class="header">
			<view class="header-info">
				<view class="info-item">
					<text class="item-label">电池内总压(电池端)：</text>
					<text class="item-content">{{data4*10}}(mV)</text>
				</view>
				<view class="info-item">
					<text class="item-label">电池外总压(负载端)：</text>
					<text class="item-content">{{data5*10}}(mV)</text>
				</view>
				<view class="info-item">
					<text class="item-label">瞬间电流：</text>
					<text class="item-content">{{data6*10}}(℃)</text>
				</view>
				<view class="info-item">
					<text class="item-label">电芯温度：</text>
					<text class="item-content">{{data8*10}}(℃)</text>
				</view>
				<view class="info-item">
					<text class="item-label">环境温度：</text>
					<text class="item-content">{{data9/10}}(℃)</text>
				</view>
				<view class="info-item">
					<text class="item-label">MOS温度：</text>
					<text class="item-content">{{data10/10}}</text>
				</view>
				<view class="info-item">
					<text class="item-label">相对容量百分比RSOC：</text>
					<text class="item-content">{{data19/10}}</text>
				</view>
				<view class="info-item">
					<text class="item-label">当前工况下剩余容量：</text>
					<text class="item-content">{{data21}}(1mAh)</text>
				</view>
			</view>
		</view>
		<hl-divider>温度</hl-divider>
		<view class="nav">
			<view class="nav-left">
				<view class="nav-info">
					<view class="nav-status">温度1</view>
					<view class="nav-light">{{data42/10}}(℃)</view>
				</view>
				<view class="nav-info">
					<view class="nav-status">温度2</view>
					<view class="nav-light">{{data43/10}}(℃)</view>
				</view>
				<view class="nav-info">
					<view class="nav-status">温度3</view>
					<view class="nav-light">{{data44/10}}(℃)</view>
				</view>
				<view class="nav-info">
					<view class="nav-status">温度4</view>
					<view class="nav-light">{{data45/10}}(℃)</view>
				</view>
			</view>
			<view class="nav-right">
				<view class="nav-progress">
					<view class="charts-box">
						<qiun-data-charts type="gauge" :opts="opts" :chartData="chartData" />
					</view>
				</view>
				<view class="nav-contain">

				</view>
			</view>

		</view>
		<hl-divider>电芯</hl-divider>

		<view class="show-icons">
			<view class="icons-item">
				<view class="icon">
					<image src="../../static/icons/A.png" mode="widthFix" style="width:80rpx;"></image>
				</view>
				<view class="icon-content">
					<view class="data">
						{{data27}} mV
					</view>
					<view class="title">
						电芯1
					</view>
				</view>
			</view>
			<view class="icons-item">
				<view class="icon">
					<image src="../../static/icons/A.png" mode="widthFix" style="width:80rpx;"></image>
				</view>
				<view class="icon-content">
					<view class="data">
						{{data28}} mV
					</view>
					<view class="title">
						电芯2
					</view>
				</view>
			</view>
			<view class="icons-item">
				<view class="icon">
					<image src="../../static/icons/A.png" mode="widthFix" style="width:80rpx;"></image>
				</view>
				<view class="icon-content">
					<view class="data">
						{{data29}} mV
					</view>
					<view class="title">
						电芯3
					</view>
				</view>
			</view>
			<view class="icons-item">
				<view class="icon">
					<image src="../../static/icons/A.png" mode="widthFix" style="width:80rpx;"></image>
				</view>
				<view class="icon-content">
					<view class="data">
						{{data30}} mV
					</view>
					<view class="title">
						电芯4
					</view>
				</view>
			</view>
			<view class="icons-item">
				<view class="icon">
					<image src="../../static/icons/A.png" mode="widthFix" style="width:80rpx;"></image>
				</view>
				<view class="icon-content">
					<view class="data">
						{{data31}} mV
					</view>
					<view class="title">
						电芯5
					</view>
				</view>
			</view>
			<view class="icons-item">
				<view class="icon">
					<image src="../../static/icons/A.png" mode="widthFix" style="width:80rpx;"></image>
				</view>
				<view class="icon-content">
					<view class="data">
						{{data32}} mV
					</view>
					<view class="title">
						电芯6
					</view>
				</view>
			</view>
			<view class="icons-item">
				<view class="icon">
					<image src="../../static/icons/A.png" mode="widthFix" style="width:80rpx;"></image>
				</view>
				<view class="icon-content">
					<view class="data">
						{{data33}} mV
					</view>
					<view class="title">
						电芯7
					</view>
				</view>
			</view>

			<view class="icons-item">
				<view class="icon">
					<image src="../../static/icons/A.png" mode="widthFix" style="width:80rpx;"></image>
				</view>
				<view class="icon-content">
					<view class="data">
						{{data34}} mV
					</view>
					<view class="title">
						电芯8
					</view>
				</view>
			</view>
			<view class="icons-item">
				<view class="icon">
					<image src="../../static/icons/A.png" mode="widthFix" style="width:80rpx;"></image>
				</view>
				<view class="icon-content">
					<view class="data">
						{{data35}} mV
					</view>
					<view class="title">
						电芯9
					</view>
				</view>
			</view>
			<view class="icons-item">
				<view class="icon">
					<image src="../../static/icons/A.png" mode="widthFix" style="width:80rpx;"></image>
				</view>
				<view class="icon-content">
					<view class="data">
						{{data36}} mV
					</view>
					<view class="title">
						电芯10
					</view>
				</view>
			</view>
			<view class="icons-item">
				<view class="icon">
					<image src="../../static/icons/A.png" mode="widthFix" style="width:80rpx;"></image>
				</view>
				<view class="icon-content">
					<view class="data">
						{{data37}} mV
					</view>
					<view class="title">
						电芯11
					</view>
				</view>
			</view>
			<view class="icons-item">
				<view class="icon">
					<image src="../../static/icons/A.png" mode="widthFix" style="width:80rpx;"></image>
				</view>
				<view class="icon-content">
					<view class="data">
						{{data38}} mV
					</view>
					<view class="title">
						电芯12
					</view>
				</view>
			</view>
			<view class="icons-item">
				<view class="icon">
					<image src="../../static/icons/A.png" mode="widthFix" style="width:80rpx;"></image>
				</view>
				<view class="icon-content">
					<view class="data">
						{{data39}} mV
					</view>
					<view class="title">
						电芯13
					</view>
				</view>
			</view>
			<view class="icons-item">
				<view class="icon">
					<image src="../../static/icons/A.png" mode="widthFix" style="width:80rpx;"></image>
				</view>
				<view class="icon-content">
					<view class="data">
						{{data40}} mV
					</view>
					<view class="title">
						电芯14
					</view>
				</view>
			</view>
			<view class="icons-item">
				<view class="icon">
					<image src="../../static/icons/A.png" mode="widthFix" style="width:80rpx;"></image>
				</view>
				<view class="icon-content">
					<view class="data">
						{{data41}} mV
					</view>
					<view class="title">
						电芯15
					</view>
				</view>
			</view>
			<view class="icons-item">
				<view class="icon">
					<image src="../../static/icons/A.png" mode="widthFix" style="width:80rpx;"></image>
				</view>
				<view class="icon-content">
					<view class="data">
						{{data42}} mV
					</view>
					<view class="title">
						电芯16
					</view>
				</view>
			</view>
		</view>
		<!-- 
 

		<view class="tips">
			<view class="card">
				<view class="card-header">
					<text class="header-txt">保护信息</text>
				</view>
				<view class="tips-line">

				</view>
				<view class="card-content">

				</view>
			</view>
			<view class="white-space">

			</view>
			<view class="card">
				<view class="card-header">
					<text class="header-txt">告警信息</text>
				</view>
				<view class="tips-line">

				</view>
				<view class="card-content">

				</view>
			</view>
		</view>
		<view class="temperature">
			<view class="temp-icon">
				<image src="../../static/icons/temp.png" mode="widthFix" style="width:300rpx;"></image>
			</view>

			<view class="temp-content">
				<view class="temp-header">
					<view class="header-title">
						<text>MOS </text>
						<text class="fs-c">0℃</text>
						<text>均衡</text>
						<text class="fs-c">0℃</text>
					</view>
				</view>
				<view class="temp-line">

				</view>
				<view class="content-item">
					<view class="content-1">
						<text>T1
						</text>
						<text class="fs-c">
							℃
						</text>
						<text>T2</text>
						<text class="fs-c">
							℃
						</text>
					</view>
					<view class="content-2">
						<text>T2
						</text>
						<text class="fs-c">
							℃
						</text>
						<text>T4</text>
						<text class="fs-c">
							℃
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<hl-divider>单体电压</hl-divider>
		</view>
 -->
		<hl-divider>发送数据</hl-divider>
		<view class="view-input-send">
			<textarea maxlength="-1" row="4" value="" v-model="sendData" />
		</view>
		<view class="view-bt-send" style="margin:10rpx 0;text-align: center;box-sizing: border-box;padding: 0 40rpx;">
			<button class="bt-send" type="primary" size="small" @click="btSendTap" hover-start-time="0">发送</button>
		</view>
	</view>
</template>

<script>
	// #ifdef APP
	import ecUI from '../../utils/ecUI.js'
	import ecBLE from '../../utils/ecBLE/ecBLE.js'
	// #endif   
	// #ifdef MP
	const ecUI = require('../../utils/ecUI.js')
	const ecBLE = require('../../utils/ecBLE/ecBLE.js')
	// #endif
	let ctx
	let isCheckScroll = true
	let isCheckRevHex = false
	let isCheckSendHex = false

	export default {
		data() {
			return {
				sendData: '',
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['gauge'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					width: 10,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: 0,
					title: {
						name: "相对容量百分比",
						fontSize: 12,
						color: "#2fc25b",
						offsetY: 70
					},
					subtitle: {
						name: "RSOC",
						fontSize: 12,
						color: "#666666",
						offsetY: -50
					},
					extra: {
						gauge: {
							type: "default",
							width: 10,
							labelColor: "#666666",
							startAngle: 0.75,
							endAngle: 0.25,
							startNumber: 0,
							endNumber: 100,
							labelFormat: "",
							splitLine: {
								fixRadius: 0,
								splitNumber: 10,
								width: 20,
								color: "#FFFFFF",
								childNumber: 5,
								childWidth: 12
							},
							pointer: {
								width: 20,
								color: "auto"
							}
						}
					}
				},
				data0: null,
				data1: null,
				data2: null,
				data3: null,
				data4: null,
				data5: null,
				data6: null,
				data7: null,
				data8: null,
				data9: null,
				data10: null,
				data11: null,
				data12: null,
				data13: null,
				data14: null,
				data15: null,
				data16: null,
				data17: null,
				data18: null,
				data19: null,
				data20: null,
				data21: null,
				data22: null,
				data23: null,
				data24: null,
				data25: null,
				data26: null,
				data27: null, //电芯1
				data28: null,
				data29: null,
				data30: null,
				data31: null,
				data32: null,
				data33: null,
				data34: null,
				data35: null,
				data36: null,
				data37: null,
				data38: null,
				data39: null,
				data40: null,
				data41: null,
				data42: null, //温度1
				data43: null,
				data44: null,
				data45: null,
			};
		},
		onLoad() {
			this.parseData()
			ctx = this
			isCheckScroll = true
			isCheckRevHex = false
			isCheckSendHex = false
			this.sendData = ''

			//on disconnect
			ecBLE.onBLEConnectionStateChange(() => {
				ecUI.showModal('提示', '设备断开连接')
			})
			//receive data
			ecBLE.onBLECharacteristicValueChange((str, strHex) => {
				// let data =
				// 	ctx.textRevData +
				// 	'[' +
				// 	ctx.dateFormat('hh:mm:ss,S', new Date()) +
				// 	']: ' +
				// 	(isCheckRevHex ? strHex.replace(/[0-9a-fA-F]{2}/g, ' $&') : str) +
				// 	'\r\n'
				console.log("接收到的数据", str)
				ctx.textRevData = str
				this.parseData(str)
				if (isCheckScroll) {
					if (ctx.scrollIntoView === "scroll-view-bottom") {
						ctx.scrollIntoView = "scroll-view-bottom2"
					} else {
						ctx.scrollIntoView = "scroll-view-bottom"
					}
				}
			})
		},
		onUnload() {
			ecBLE.onBLEConnectionStateChange(() => {})
			ecBLE.onBLECharacteristicValueChange(() => {})
			ecBLE.closeBLEConnection()
		},

		methods: {
			// 输入数据
			inputSendData(e) {
				this.sendData = e.detail.value
			},
			// 发送数据
			btSendTap() {
				if (this.sendData.length === 0) {
					ecUI.showModal('提示', '请输入要发送的数据')
					return
				}
				let tempSendData = this.sendData.replace(/\n/g, '\r\n')
				if (tempSendData.length > 244) {
					ecUI.showModal('提示', '最多只能发送244字节')
					return
				}
				ecBLE.writeBLECharacteristicValue(tempSendData, false)
			},
			parseData(str) {
				console.log(str)
				// 字节长度
				let parseRule = [4, 8, 4, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 2, 2, 2, 2, 2, 2, 4, 4, 2, 1, 1, 4, 2, 2, 2,
					2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2
				]
				let parseTitles = [
					"控制码",
					"故障码",
					"状态码",
					"RTC时间",
					"电池内总压(电池端)",
					"电池外总压(负载端)",
					"瞬间电流",
					"平均电流",
					"电芯温度",
					"环境温度",
					"MOS温度",
					"最高单节电压",
					"最低单节电压",
					"最高单节电压串号",
					"最低单节电压串号",
					"压差",
					"允许充电电压",
					"允许充电电流",
					"允许放电电流",
					"相对容量百分比RSOC",
					"电池包健康状态SOH",
					"当前工况下剩余容量",
					"当前工况下满充容量FCC",
					"电池包循环次数",
					"bit0-bit3运行模式bit4-bit7预防电状态",
					"电芯串数",
					"均衡状态",
					"电芯1",
					"电芯2",
					"电芯3",
					"电芯4",
					"电芯5",
					"电芯6",
					"电芯7",
					"电芯8",
					"电芯9",
					"电芯10",
					"电芯11",
					"电芯12",
					"电芯13",
					"电芯14",
					"电芯15",
					"电芯16",
					"温度1",
					"温度2",
					"温度3",
					"温度4",
				]
				// 这个数据是16进制数，两个一组，每一组都代表一个字节

				// let dataStr =
				// 	"F7FD0000010000000000480002001002AC197D38171100000000EEFF000000007C01880BF30A010495008214E20400000000E80300000000A86100000300000F000000007E0B880B770B810BF30A620B4B0B690B600B5A0B810B720B530B750B6C0B0000A4019A0100000000"
				let dataStr = ""
				if (str) {
					//判断协议:是否正确F4036C
					let agreement = str.split("").splice(0, 6).join("")
					if (agreement != 'F4036C') {
						ecUI.showModal("错误", "传输协议错误")
						return
					}
					dataStr = str.substr(6)
					console.log("去除协议部分后的数据：", dataStr)
				}
				//
				let dataArr = dataStr.split("")
				parseRule.forEach((item, index) => {
					//获取相应位置的数据
					let str = dataArr.splice(0, item * 2).join("")

					let datastr = '0x' + this.reverseData(str)
					//转换为十进制
					datastr = parseInt(datastr).toString(10)
					// console.log(`${parseTitles[index]}:${datastr}`)
					this[`data${index}`] = datastr
				})
				//显示指针图形，参数为data20:相对容量百分比RSOC
				this.getServerData(this.data20)
			},
			// 定义一个反转方法，接受一个参数，该参数为所占位数，比如2位，4位，8位，按照统一的2位为一组，进行前后反转
			reverseData(str) {
				//判断错误，如果字符串长度不是2的倍数，报错
				if (str.length % 2 != 0) {
					throw new Error('数据错误，非2的倍数');
					return
				}
				let dataArr = str.split("")
				//定义一个临时变量
				let arr = [];
				//每次截取2位，push进arr
				let num = str.length / 2
				for (var i = 0; i < num; i++) {
					arr.push(dataArr.splice(dataArr.length - 2, 2).join(""))
				}

				// 最后将arr转换为字符串并返回
				return arr.join("")
			},

			checkScroll(e) {
				if (e.detail.value.length) isCheckScroll = true
				else isCheckScroll = false
			},
			checkRevHex(e) {
				if (e.detail.value.length) isCheckRevHex = true
				else isCheckRevHex = false
			},
			checkSendHex(e) {
				if (e.detail.value.length) isCheckSendHex = true
				else isCheckSendHex = false
			},
			inputSendData(e) {
				this.sendData = e.detail.value
			},
			btClearTap() {
				ctx.textRevData = ''
			},

			dateFormat(fmt, date) {
				var o = {
					'M+': date.getMonth() + 1, //月份
					'd+': date.getDate(), //日
					'h+': date.getHours(), //小时
					'm+': date.getMinutes(), //分
					's+': date.getSeconds(), //秒
					'q+': Math.floor((date.getMonth() + 3) / 3), //季度
					S: date.getMilliseconds(), //毫秒
				}
				if (/(y+)/.test(fmt))
					fmt = fmt.replace(
						RegExp.$1,
						(date.getFullYear() + '').substr(4 - RegExp.$1.length)
					)
				for (var k in o)
					if (new RegExp('(' + k + ')').test(fmt)) {
						// console.log(RegExp.$1.length)
						// console.log(o[k])
						fmt = fmt.replace(
							RegExp.$1,
							RegExp.$1.length == 1 ?
							(o[k] + '').padStart(3, '0') :
							('00' + o[k]).substr(('' + o[k]).length)
						)
					}
				return fmt
			},

			getServerData(data) {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: [{
							"value": 0.2,
							"color": "#1890ff"
						}, {
							"value": 0.8,
							"color": "#2fc25b"
						}, {
							"value": 1,
							"color": "#f04864"
						}],
						series: [{
							name: "完成率",
							data: data / 1000
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style lang="scss">
	$pro-primary: #0089F4;

	.fs-c {
		color: #0089F4;
	}

	.layout {
		padding: 0 20rpx;
		min-height: 100 Vh;
		color: $uni-color-subtitle;
		font-size: 24rpx;

		.header {
			height: 200rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.header-info {
				display: flex;
				flex-wrap: wrap;

				.info-item {
					font-size: 24rpx;
					height: 80rpx;
					box-sizing: border-box;
					width: 33.3%;

					.item-label {
						text-align: center;
						font-size: 20rpx;
						display: flex;
						justify-content: center;
						width: 100%;
					}

					.item-content {
						text-align: center;
						display: flex;
						justify-content: center;
						width: 100%;
					}

				}
			}
		}

		.nav {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.nav-left {
				display: flex;
				flex-direction: column;
				justify-content: stretch;

				.nav-info {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.nav-status {
						width: 160rpx;
					}
				}
			}

			.nav-right {
				width: 50%;
				display: flex;
				flex-direction: column;

				.nav-progress {
					.charts-box {
						width: 100%;
						height: 180px;
						overflow: hidden;
					}
				}

				.nav-contain {
					text-align: center;
					font-size: 24rpx;
					margin-top: -50rpx;
				}
			}
		}

		.show-icons {
			display: flex;
			flex-wrap: wrap;

			.icons-item {
				height: 120rpx;
				width: 33.3%;
				display: flex;

				.icon-content {
					.data {
						color: $pro-primary;
					}
				}
			}
		}

		.tips {
			height: 360rpx;
			display: flex;
			box-sizing: border-box;

			.white-space {
				width: 4%;
			}

			.card {
				border-radius: 24rpx;
				box-shadow: 2px 2px 3px #ccc, -2px -2px 3px #ccc, 0px 2px 3px #ccc, 2px 0px 3px #ccc;
				width: 48%;
				height: 300rpx;
				border-bottom: 1rpx solid #ccc;
				padding: 10rpx 12rpx;

				.tips-line {
					margin: 4rpx 0;
					width: 100%;
					height: 2rpx;
					background-color: #ccc;
				}

				.card-header {
					position: relative;

					&::before {
						content: "";
						position: absolute;
						left: 2rpx;
						width: 4rpx;
						height: 40rpx;
						background-color: #0089F4;
					}

					.header-txt {
						margin-left: 12rpx;
						box-sizing: border-box;
					}
				}
			}
		}

		.temperature {
			border-radius: 24rpx;
			box-shadow: 2px 2px 3px #ccc, -2px -2px 3px #ccc, 0px 2px 3px #ccc, 2px 0px 3px #ccc;
			height: 300rpx;
			border-bottom: 1rpx solid #ccc;
			padding: 10rpx 12rpx;
			display: flex;

			.temp-icon {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 30%;
			}

			.temp-content {
				width: 70%;

				.temp-header {
					box-sizing: border-box;
					height: 100rpx;
					font-size: 36rpx;
					line-height: 100rpx;

					.header-title {
						display: flex;
						justify-content: space-evenly;
						align-items: center;
					}
				}

				.temp-line {
					width: 100%;
					height: 2rpx;
					background-color: #ccc;
				}

				.content-item {
					height: 200rpx;
					box-sizing: border-box;
					padding: 20rpx 30rpx;

					.content-1,
					.content-2 {
						margin-top: 12rpx;
						box-sizing: border-box;
						width: 100%;
						display: flex;
						justify-content: space-evenly;
						align-items: center;
						font-size: 32rpx;
					}

				}
			}
		}
	}

	.view-input-send {
		border: 1px solid #ddd;
		background-color: #ffff2;
	}

	.view-bt-send {
		.bt-send {
			height: 44px;
		}
	}
</style>